<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";
import { zyrwList } from "@/data/zyrw";
import { postJbfaTable } from "@/api/table";

const tableData = ref(zyrwList);
const city = window.globalObj.name;
const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();
const valueHtml = ref(
  "<p>在省人民防空指挥部的领导下，主要明确上级意图，市本级担负的基本任务、重点防护任务和跨区支援任务清单等。</p>"
);
const valueHtml1 = ref(
  "<p>遵循“统一指挥、按级负责、条块结合、以防为主”的原则，以重要目标和人员防护、隐蔽为重点，采取多种措施，灵活、果断处置各种情况，有效组织人民防空行动，最大限度地减少人员伤亡和财产损失，保证战争潜力，确保防空袭斗争的全面胜利。</p>"
);

const valueHtml2 = ref(
  "<p>（1）根据国家发布的战争动员令，适时转入战时人民防空组织指挥体制，开设人防指挥所，进行战前人民防空总动员；（2）组织修订完善各县（区）人民防空方案，实施人民防空战备等级转换；（3）指导、督促各级完成人防工程功能平战转换，抢修、加固防护工程，扩建人防专业队伍；（4）组织临战训练，组织各类战备物资器材筹措补充，做好临战前各项准备；（5）实施城市人口疏散和隐蔽，保护人民群众生命财产安全；（6）启动空情预警系统，加强战备值班，及时掌握空情动态，实时接收、发放和报告空情信息，为各级组织防空袭斗争提供准确可靠的情报；（7）采取多种通信保障方案，及时检查维护通信设施，保障各种人防通信网络特别是人防指挥通信的畅通，依令适时发放防空警报信号；（8）建立各级防空组织和城市防空管控体制，指挥城市实施交通、治安和灯火、舆情等管制行动，维护社会正常秩序，确保战时社会和人心稳定；（9）指导各级做好重要目标的伪装防护和加固抢修，及时掌握城市遭袭损毁情况，组织开展消除空袭后果行动，指导重灾区域迅速组织开展抢救抢险抢修；（10）协调相关单位组织跨区支援；（11）开展政治思想和人民防空宣传教育，稳定民心，鼓舞士气，动员群众开展自救互救，积极参与防空袭斗争；（12）完成上级赋予的其他防空袭任务。</p>"
);

const valueHtml3 = ref(
  `<p>一般按照就近就地的原则实施支援保障任务，一级国家人防重点城市由周边城市向心支援；三级国家人防重点城市支援二级和一级城市，相邻的二级国家人防重点城市按照互为支援的原则组织实施。①临近哈尔滨市的${city}对其实施向心支援。②${city}、齐齐哈尔市既是二级国家人防重点城市，又互相邻近，战时既要重点做好本市辖区内人员及重要目标的防护，又要实施相互支援，必要时参与对省会哈尔滨市的支援；遇有特殊情况时，参与实施省域跨区支援。</p>`
);

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");
const editorRef10 = shallowRef();
const valueHtml10 = ref(
  "全市现有重要目标单位***个，其中一级目标**个、二级目标**个、三级目标**个。战时重要目标的防护采取搬迁、转移、隐蔽、加固、伪装、干扰、拦阻等措施。尤其要重视新质新域作战力量，积极组织电子防护，提高重要目标的生存能力。"
);
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "主要任务" }).then((res) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "主要任务引言")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "上级意图")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "本级担负的基本任务")?.v || "";
    valueHtml3.value = data.find((x) => x.k === "跨区支援任务")?.v || "";
    valueHtml10.value = data.find((x) => x.k === "重点防护任务")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};

const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "主要任务",
      data: [
        {
          k: "主要任务引言",
          v: valueHtml.value,
        },
        {
          k: "上级意图",
          v: valueHtml1.value,
        },
        {
          k: "本级担负的基本任务",
          v: valueHtml2.value,
        },
        {
          k: "跨区支援任务",
          v: valueHtml3.value,
        },
        {
          k: "重点防护任务",
          v: valueHtml10.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

// 重点防护目标清单
// const zdList = ref([]);
// const getZdData = () => {
//   return postJbfaTable("zdfhmbqdList").then((res) => {
//     if (res.code === 200) {
//       zdList.value = res?.data || [];
//     }
//   });
// };

onMounted(() => {
  initHtml();
  // getZdData();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  if (editorRef10.value) editorRef10.value.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="引言" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="上级意图" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="本级担负的基本任务" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <FirstTitle name="重点防护任务" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>

    <FirstTitle name="跨区支援任务" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>

